<template>
  <div class="boss">
    <div class="war">
      <div class="area-center">
        <head-page
          :title="`${text}(${this.$route.query.i})`"
          id="back"
        ></head-page>
        <div class="center area-center">
          <div v-if="$route.query.i == '全国各省'">
            <van-field
              readonly
              clickable
              colon
              name="picker"
              :border="false"
              :value="area"
              label="地区选择"
              placeholder="选择地区"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                show-toolbar
                value-key="provincial"
                :columns="areaList"
                @confirm="onConfirm"
                @cancel="showPicker = false"
              />
            </van-popup>
          </div>

          <!-- 省会内容总区域  -->
          <div class="shenghui verdana" v-if="list && list.length">
            <!-- 省会区域 -->
            <div class="small m-t-07" v-for="(item, index) in list" :key="index">
              <!-- 原点区域 -->
              <div class="left">
                <img src="../../../assets/diamondbalck.png" alt="" />
              </div>
              <!-- 内容区域 -->
              <div class="right title_word" @click="ChamberDetails(item)">
                {{ item.newsTitle }}
              </div>
            </div>
          </div>
          <div v-else class="p-20 tac">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { newsTitles, Notice } from "@/api/index";
// newsDate,newsBiaoti
export default {
  data() {
    return {
      showPicker: false,
      area: "",
      areaList: [],
      list: [],
      text: "",
    };
  },

  mounted() {
    // 全国各省
    if (this.$route.query.i == "全国各省") {
      Notice().then((res) => {
        this.areaList = res.data ? res.data.slice(0, res.data.length - 2) : "";
      });
      newsTitles().then((res) => {
        if (res.data.code == 200) {
          if (res.data.data == "") {
          } else {
            this.list = res.data.data;
            this.text = res.data.data[0].fatherId;
          }
        }
      });
    } else if (this.$route.query.i == "海外") {
      // 海外
      newsTitles(this.$route.query.i).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data == "") {
          } else {
            this.list = res.data.data;
            this.text = res.data.data[0].fatherId;
          }
        }
      });
    } else {
      // 定位出来的省份
      newsTitles(this.$route.query.i.substr(0, 2)).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data == "") {
          } else {
            this.list = res.data.data;
            this.text = res.data.data[0].fatherId;
          }
        }
      });
    }
  },
  methods: {
    //商会跳详情
    ChamberDetails(item) {
      this.$router.push({
        path: "/newsthree/shangDetail",
        query: { id: item.newsId, text: item.newsTitle },
      });
    },
    // 选择地区
    onConfirm(data) {
      this.area = data.provincial;
      this.showPicker = false;
      newsTitles(data.provincial).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
          this.text = res.data.data[0].fatherId;
        }
      });
    },
  },
};
</script>


<style scoped>
/* 大盒子区域 */
.boss {
  width: 100%;
}
/* 版心区域 */
.center {
  min-height: 2rem;
}
/* 关注各省的标题 */
.guan {
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 20px;
}
/* 省会总区域 */
.shenghui {
  width: 100%;
}
/* 省会区域 */
.small {
  width: 100%;
  display: flex;

}
/* 原点区域 */
.left {
  width: 5.5%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.08rem;
}
.left img {
  width: 0.18rem;
  height: 0.18rem;
}
/* 内容区域 */
.right {
  width: 94%;
}
</style>
